$topbar-height:120px;
$page-wrapper-width:1140px;
$color-main:#ff5050;

/* Reset the container */
.page-content,.container {
    width: $page-wrapper-width !important;
    max-width: none !important;
}


.text-overflow {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.text-overflow-line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.bg-gray {
    background: #EDF1F5;
}

#main-wrapper[data-layout=horizontal][data-sidebar-position=fixed] {

    .topbar {
        height: $topbar-height;

        .top-navbar {
            height: $topbar-height;
            max-width: 1200px;
            margin: 0 auto;

            .navbar-header {
                border: none;
                width: 220px;
            }
        }

        .navbar-nav>.nav-item {
            transition: 0.2s ease-in;

            &:hover {
                background: none;
            }

            .app-search {
                margin-top: 10px;

                .form-control {
                    width: 400px;
                    height: 44px;
                }

                a {
                    top: 12px;
                    right: 15px;
                }
            }
        }
    }



    .sidebar-nav {
        #sidebarnav {
            display: flex;
            .sidebar-item {
                .sidebar-link {
                    font-weight: normal;
                    opacity: 1;
                    padding: 13px 20px 12px 20px;

                    i {
                        font-size: 14px;
                        width: 20px;
                    }
                }
            }
        }
    }

    .left-sidebar {
        padding-top: 120px;

        .scroll-sidebar {
            max-width: $page-wrapper-width;
            margin: 0 auto;
        }
    }

    .page-wrapper {
        padding-top: 170px;

        .page-content {
            max-width: $page-wrapper-width;
            margin: 0 auto;
            padding: 30px 0;
            min-height: auto;
        }
    }

}

@media (max-width: 767.98px) {
    #main-wrapper[data-sidebartype=mini-sidebar] .left-sidebar {
        left: 0px;
        width: 100%;
        height: auto;
    }
    .sidebarnav{
        display: flex;
    }
}

.home-carousel {
    .carousel-indicators {
        bottom: 30px;
    }
}

.search-wrapper {
    width: 900px;
    margin: -30px auto 0 auto;
    padding: 26px 44px;
    position: relative;
    z-index: 2;

    .form-control {
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
    }

    .btn {
        border-top-right-radius: 50px;
        border-bottom-right-radius: 50px;
    }
}

.el-element-overlay .el-card-item .el-overlay-1 .el-info .el-item .el-link:hover {
    background: $color-main;
    border-color: $color-main
}

.tehui-badge {
    position: absolute;
    background: $color-main;
    z-index: 2;
    top: 0;
    right: 0;
    padding: 6px 12px;
    color: #fff;
    border-bottom-left-radius: 8px;
}

.footer {
    padding: 0px;
    background: #2F323E;

    .footer-links {
        ul {
            list-style-type: none;
            padding-left: 0;
        }

        h3 {
            color: #D5E3F3;
        }

        .container {
            max-width: $page-wrapper-width;
        }
    }

    .footer-copyright {
        padding: 20px;
        background: #1F222F;
    }

    li {
        padding-top: 10px;
    }
}

.types-filter {
    .btn-outline-danger {
        border: none;
        margin-right: 10px;
        border-radius: 50px !important;
        color: #313131;

        &:hover {
            color: #fff;
            cursor: pointer;
        }
    }
}

.list-filter {
    .btn-outline-danger {
        border: none;
        margin-right: 10px;
        border-radius: 50px !important;
        color: #313131;

        &:hover {
            color: #fff;
            background: none;
            color: $color-main;
            cursor: pointer;
        }

        &:not(:disabled):not(.disabled).active,
        &:not(:disabled):not(.disabled):active {
            background: none;
            color: $color-main;
            box-shadow: none;
        }
    }
}

.goods-select {
    .btn {
        transition: all 0s ease-in-out;
    }

    .btn-outline-danger {
        margin-right: 10px;
        border-radius: 0px !important;
        color: #8898aa;
        border: 2px solid #8898aa;

        &:hover {
            color: #fff;
            background: none;
            color: $color-main;
            border-color: $color-main;
            cursor: pointer;
        }

        &:not(:disabled):not(.disabled).active,
        &:not(:disabled):not(.disabled):active {
            background: none;
            color: $color-main;
            box-shadow: none;
            border: 2px solid $color-main;
            background: url(../../assets/images/select-icon.png) right bottom no-repeat;
            background-size: 18px;
        }
    }
}

.goods-carousel {
    padding-bottom: 100px;
    background: #000;

    .carousel-indicators {
        margin: 0;
        bottom: -10px;

        li {
            background: none;
            border: none;
            margin: 0;
            position: relative;
            width: 100px;
            height: 100px;

            img {
                width: 95%;
                position: absolute;
                left: 0;
                top: 0;
            }
        }
    }

    .carousel-inner {
        .img-fluid {
            width: 100%;
        }
    }
}

.customtab .nav-link.active,
.customtab .nav-link:hover {
    border-color: $color-main;
    color: $color-main;
}

.border-title {
    border-left: 4px solid $color-main;
    padding-left: 10px;
    margin-bottom: 20px;
}

.auth-wrapper {
    min-height: 70vh;
}

.customtab {
    border-bottom: 3px solid #EEEFF0;

    .nav-item {
        margin-bottom: -3px;
    }

    .nav-link {
        border-bottom: 3px solid #EEEFF0;
        font-size: 18px;
    }

}

.custom-file-input:lang(en)~.custom-file-label::after {
    content: "浏览";
}

.topic-banner {
    height: 500px;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);

}